<script setup lang="ts">
import { ref } from 'vue'
import { useFilterTodosStore } from '../stores/filterTodos'
import CustLabel from '../components/CustLabel.vue'
import dayjs from 'dayjs'

const filterTodosStore = useFilterTodosStore()

const emit = defineEmits(['open-filter-popup'])

// 打开筛选弹窗
const openFilterPopup = () => {
  emit('open-filter-popup')
}

// 去除筛选的标签
const removeLabel = (label: Label) => {
  const index = filterTodosStore.filterOptions.labels.findIndex(item => item.name === label.name)
  if (index > -1) {
    filterTodosStore.filterOptions.labels.splice(index, 1)
  }
}

// 清除特定筛选条件
const clearFilterOption = (key: 'status' | 'timeRange' | 'keyword') => {
  const index = filterTodosStore.selectedOption.indexOf(key)
  if (index > -1) {
    filterTodosStore.selectedOption.splice(index, 1)
  }
  
  // 根据不同类型重置对应的值
  switch (key) {
    case 'status':
      filterTodosStore.setFilterOptions({ status: 'all' })
      break
    case 'timeRange':
      filterTodosStore.setFilterOptions({ timeRange: null })
      break
    case 'keyword':
      filterTodosStore.setFilterOptions({ keyword: '' })
      break
  }
}

defineProps<{
  position: {
    left?: string,
    right?: string,
    top?: string,
    bottom?: string
  }
}>()
</script>

<template>
  <view class="todos-filter-container" :style="position" :class="[!filterTodosStore.selectedOption.length && 'no-filter']">
    <!-- 筛选按钮 -->
    <view class="filter-btn" @click="openFilterPopup">
      筛选
    </view>

    <!-- 筛选条件 -->
    <view class="filter-options" :style="{ 'margin-left': filterTodosStore.selectedOption.length ? '30rpx' : '0' }">
      <!-- 状态筛选 -->
      <view class="filter-option status" v-if="filterTodosStore.selectedOption.includes('status')">
        {{ filterTodosStore.filterOptions.status === 'doing' ? '进行中' : '已完成' }}
        <image src="../static/icons/delete-small.png" @click.stop="clearFilterOption('status')" />
      </view>

      <!-- 时间范围筛选 -->
      <view class="filter-option time-range" v-if="filterTodosStore.selectedOption.includes('timeRange')">
        <view class="time-range-box">
          <view>{{ dayjs(filterTodosStore.filterOptions.timeRange?.[0]).format('YY/M/D') || '' }}</view>
          <view>{{ dayjs(filterTodosStore.filterOptions.timeRange?.[1]).format('YY/M/D') || '' }}</view>
        </view>
        <image src="../static/icons/delete-small.png" @click.stop="clearFilterOption('timeRange')" />
      </view>

      <!-- 标签筛选 -->
      <view class="filter-option labels" v-if="filterTodosStore.selectedOption.includes('labels')">
        <view class="label-list">
          <CustLabel
            v-for="label in filterTodosStore.filterOptions.labels"
            :key="label.name"
            :label="label"
            type="deleteable"
            :style="{ fontSize: '24rpx' }"
            @delete="removeLabel(label)"
          />
        </view>
      </view>
      
      <!-- 关键词搜索 -->
      <view class="filter-option keyword" v-if="filterTodosStore.selectedOption.includes('keyword')">
        {{ filterTodosStore.filterOptions.keyword }}
        <image src="../static/icons/delete-small.png" @click.stop="clearFilterOption('keyword')" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.todos-filter-container {
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: $uni-shadow-base;
  z-index: 100;
  transition: all 0.3s ease-in-out;
  
  .filter-btn {
    width: 100rpx;
    height: 60rpx;
    background-color: #339ca8;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: 30rpx;
  }
  
  .filter-options {
    display: flex;
    justify-content: flex-start;
    gap: 20rpx;
    max-width: 700rpx;

    .filter-option {
      display: flex;
      align-items: center;
      gap: 8rpx;
      color: #6a6a6a;
      text-decoration: underline;
      text-underline-offset: 8rpx;
      text-decoration-color: #6a6a6a;
      // 换行
      word-break: break-word;
      white-space: normal;

      image {
        width: 30rpx;
        height: 30rpx;
        transform: translateY(4rpx);
      }
    }

    .time-range {
      text-decoration: none;
      
      .time-range-box {
        view:last-child {
          text-decoration: underline;
          text-underline-offset: 8rpx;
          text-decoration-color: #6a6a6a;
        }
      }
    }

    .labels {
      text-decoration: none;

      .label-list {
        // background-color: aqua;
        max-width: 150rpx;
        overflow: auto;
      }
    }

    .keyword {
      max-width: 200rpx;
      overflow: auto;
    }
  }
}

.no-filter {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background-color: #339ca8;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .filter-btn {
    background-color: transparent;
    color: #fff;
    box-shadow: none;
  }
}
</style>
